<template>
  <div>
    <div class="spBox">
      <div
        v-for="(item, index) in brilliantList"
        :key="index"
        class="spLi"
        @click="videoBtn(item)"
      >
        <el-image :src="item.gifName" class="spimg" />
        <div class="spbt">{{ item.goalType }}{{ item.goalSore? '｜' + item.goalSore + '分球': '' }}</div>
        <div class="sptime">{{ item.goalTime }}</div>
      </div>
    </div>
    <el-dialog
      title="精彩瞬间"
      :close-on-click-modal="modalDialog"
      :close-on-press-escape="modalDialog"
      :visible.sync="showJk"
      width="800px"
    >
      <video :src="videoSrc" style="width: 100%" autoplay controls />
    </el-dialog>
  </div>
</template>

<script>
import { brilliantListPost } from '@/api'
import store from '@/store'
export default {
  props: {
    memberId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      modalDialog: store.getters.dialog,
      pagination: {
        firstQueryTime: this.setTempDate(),
        page: 1,
        rows: 12
      },
      brilliantList: [],
      showJk: false,
      videoSrc: ''
    }
  },
  created() {
    this.getBrilliantList()
    console.log('----,created')
  },
  methods: {
    getBrilliantList() {
      const { pagination } = this
      const param = {
        memberId: this.memberId
      }
      brilliantListPost({
        pagination,
        param
      }).then(res => {
        this.brilliantList = res.recordList
      })
    },
    videoBtn(e) {
      this.videoSrc = e.videoUrl
      this.showJk = true
    },
    setTempDate() {
      // 获取时间
      var myDate = new Date()
      return (
        myDate.getFullYear() +
        '-' +
        (myDate.getMonth() + 1) +
        '-' +
        myDate.getDate() +
        ' ' +
        myDate.getHours() +
        ':' +
        myDate.getMinutes() +
        ':' +
        myDate.getSeconds()
      )
    }
  }
}
</script>
<style lang="scss" scoped>
.spBox {
  width: calc(100% + 20px);
  display: flex;
  flex-wrap: wrap;
  .spLi {
    width: calc((100% - 80px) / 4);
    margin-right: 20px;
    margin-bottom: 30px;
    .spimg {
      width: 100%;
      vertical-align: top;
    }
    .spbt {
      font-size: 16px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #222222;
      margin-top: 15px;
      line-height: 1em;
    }
    .sptime {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #666666;
      margin-top: 15px;
      line-height: 1em;
    }
  }
}
</style>

